<template>
    <div>
        <header class="flex justify-between align-center">
            <div>授权流程</div>
            <div  class="processBtn pointer flex align-center justify-center" @click="$router.push('/authProgress')">
				<img src="../../assets/images/front/icon_find.png" alt="">
				查看授权进度
			</div>
        </header>
        <main class="authFlowContent">
            <h3 class="center">IP内部形象授权流程</h3>
            <p class="center">为方便公司内部各业务使用此IP形象，特开通形象授权流程，流程分以下三个步骤：</p>
			<article class="FlowStep">
				<ul class="flex align-center justify-center">
					<li class="flowStepItem flex align-center">
						<span class="flex justify-center align-center">1</span>
						<div class="center">
							<section>
								<img src="../../assets/images/front/ipStep1.png" >
							</section>
							<p>填写授权申请信息</p>
						</div>
					</li>
					<li class="flowStepArrow">
						<div id="">
							<img src="../../assets/images/front/ipStepArrow.png" >
							<p>等待审核反馈</p>
						</div>
					</li>
					<li class="flowStepItem flex align-center">
						<span class="flex justify-center align-center">2</span>
						<div class="center">
							<section>
								<img src="../../assets/images/front/ipStep2.png" >
							</section>
							<p>收到规范素材邮件</p>
						</div>
					</li>
					<li class="flowStepArrow">
						<div id="">
							<img src="../../assets/images/front/ipStepArrow.png" >
							<p>等待审核反馈</p>
						</div>
					</li>
					<li class="flowStepItem flex align-center">
						<span class="flex justify-center align-center">3</span>
						<div class="center">
							<section>
								<img src="../../assets/images/front/ipStep3.png" >
							</section>
							<p>上传设计稿审核</p>
						</div>
					</li>
				</ul>
			</article>
			<ul class="ipVisualList flex flex-wrap">
				<li class="VisualItem center" >
					<div class="visualCover">
						<img :src="require('@/assets/images/front/ip_img1.png')" >
					</div>
					<div class="visualLogo">
						<img  :src="require('@/assets/images/front/ip_logo1.png')"  >
					</div>
					<div class="visualContacts">
						相关联系人 @junxianguan 
					</div>
					<div class="visualAuthBtn">
						<!-- <el-button type="primary" round @click="applyAuth('14718397650@163.com',1)">申请授权</el-button> -->
						<button type="primary" round @click="applyAuth('14718397650@163.com',1)">申请授权</button>
					</div>
				</li>
				<li class="VisualItem center" >
					<div class="visualCover">
						<img :src="require('@/assets/images/front/ip_img2.png')" >
					</div>
					<div class="visualLogo">
						<img  :src="require('@/assets/images/front/ip_logo2.png')"  >
					</div>
					<div class="visualContacts">
						相关联系人 @dansonding 
					</div>
					<div class="visualAuthBtn">
						<!-- <el-button type="primary" round @click="applyAuth('14718397650@163.com',2)">申请授权</el-button> -->
						<button @click="applyAuth('14718397650@163.com',2)">申请授权</button>
					</div>
				</li>
				<li class="VisualItem center" >
					<div class="visualCover">
						<img :src="require('@/assets/images/front/ip_img3.png')" >
					</div>
					<div class="visualLogo">
						<img  :src="require('@/assets/images/front/ip_logo3.png')"  >
					</div>
					<div class="visualContacts">
						相关联系人 @pupuchen
					</div>
					<div class="visualAuthBtn">
						<!-- <el-button type="primary" round @click="applyAuth('14718397650@163.com',3)">申请授权</el-button> -->
						<button @click="applyAuth('14718397650@163.com',3)">申请授权</button>
					</div>
				</li>
			</ul>
		</main>
    </div>
</template>
<script type="text/javascript">
	export default{
		name:"ipAuth",
		data(){
			return{
				standardData:[]
			}
		},
		beforeMount(){
			this.getData();
			this.$store.commit('SET_ACTIVETYPE',2)
		},
		methods:{
			getData(){
				let that = this;
				that.standardData = [];
				this.$axios.get('/api/standard/list',{
					params:{
						user_id:1
					}
				}).then((res)=>{
					if(res.data.data && res.data.data.length>0){
						that.standardData = res.data.data
					}
					
				})
			},
			applyAuth(email,type){
				this.$router.push({
					path:'/authApply',
					query:{
						email:email,
						type:type
					}
				})
			}
		}
	}
</script>
<style scoped lang="less">
	header>div{
		font-size: 22px;
		color: #000000;
		letter-spacing: 0;
	}
	.processBtn{
		width: 211px;
		height: 50px;
		background: #0064FF;
		border-radius: 25px;
		font-size: 20px;
		border: none;
		outline: none;
		color: #fff;
		img{
			margin-right: 10px;
		}
	}
    .authFlowContent{
        position: relative;
        background-color: #fff;
        padding: 80px;
        box-sizing: border-box;
        box-shadow: 0 -5px 20px 0 rgba(0,0,0,0.05);
        margin-top: 30px;
		h3{
		    margin-bottom: 28px;
		    font-weight: 500;
		    font-size: 32px;
		    color: #000000;
		    letter-spacing: 0;
		    line-height: 30px;
		}
		p{
			font-size: 20px;
			color: #000000;
			line-height: 30px;
		}
    }
	.FlowStep{
		margin-top: 55px;
		padding-bottom: 60px;
		border-bottom: 1px solid #E3E3E3;
	}
	.ipVisualList{
		margin-top: 58px;
	}
	.VisualItem{
		flex: 1;
		margin:0 42px 60px;
		.visualCover{
			width: 100%;
			// height: 440px;
			display: flex;
			justify-content: center;
			img{
				max-width: 100%;
				max-height: 100%;
			}
		}
		.visualLogo{
			height: 65px;
			margin: 40px auto 10px;
			img{
				max-width: 100%;
			}
		}
		.visualContacts{
			margin-bottom: 16px;
			font-size: 20px;
			color: #666666;
			letter-spacing: 0;
			line-height: 30px;
		}
		.visualAuthBtn{
			button{
				width: 144px;
				height: 50px;
				font-size: 20px;
				background: #0064FF;
				border-radius: 25px;
			}
		}
	}
	.flowStepItem{
		span{
			width: 32px;
			height: 32px;
			background-color: #000000;
			border-radius: 50%;
			color: #fff;
			margin-right: 40px;
			margin-bottom: 38px;
		}
		div {
			height: 200px;
			section{
				height: 136px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			p{
				font-size: 20px;
				color: #000000;
				letter-spacing: 0;
				line-height: 30px;
				margin-top: 27px;
			}
		}
	} 
	.flowStepArrow{
		margin: 0 61px;
		p{
			margin-top: 10px;
			font-size: 16px;
			color: #000000;
			letter-spacing: 0;
			line-height: 30px;
		}
	}
</style>